<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>0073: The Frame, Part II - Shadows &amp; CSS | gtkDcoding</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="0073: The Frame, Part II - Shadows &amp; CSS" />
<meta name="author" content="Ron Tarrant" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="GTK Tutorial - Shadows, CSS, and the Frame" />
<meta property="og:description" content="GTK Tutorial - Shadows, CSS, and the Frame" />
<link rel="canonical" href="http://localhost:4000/posts/0073-frame-part-ii.html" />
<meta property="og:url" content="http://localhost:4000/posts/0073-frame-part-ii.html" />
<meta property="og:site_name" content="gtkDcoding" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2019-09-24T00:00:00-04:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="0073: The Frame, Part II - Shadows &amp; CSS" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Ron Tarrant"},"dateModified":"2019-09-24T00:00:00-04:00","datePublished":"2019-09-24T00:00:00-04:00","description":"GTK Tutorial - Shadows, CSS, and the Frame","headline":"0073: The Frame, Part II - Shadows &amp; CSS","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/0073-frame-part-ii.html"},"url":"http://localhost:4000/posts/0073-frame-part-ii.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="../assets/main.css">
  <link rel="stylesheet" href="../css/style.css" /><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="gtkDcoding" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="../">gtkDcoding</a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="../about.html">About</a><a class="page-link" href="../index-reverse.html">Posts in Date Order</a><a class="page-link" href="../topics.html">Blog Posts by Topic</a></div>
      </nav></div>
</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
	<header class="post-header">
		<link rel="stylesheet" href="../css/font_size.css" />
		<link rel="stylesheet" href="../css/figure.css" />
		<link rel="stylesheet" href="../css/topics/container.css" />  <!-- sub in the tag/topic -->
		<link rel="stylesheet" href="../css/modal.css" />
		<link rel="stylesheet" href="../css/post.css" />
		<link rel="stylesheet" href="../css/mascot_effects.css" />

		
		
		<p class="post-meta">
		<time class="dt-published" datetime="2019-09-24T00:00:00-04:00" itemprop="datePublished">Tuesday, September 24, 2019
		</time>• by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">Ron Tarrant</span></span></p>
	</header>

	<div class="post-content e-content" itemprop="articleBody">
		<div class="skew-line"></div>
		<h1 id="0073-the-frame-part-ii--shadows--css">0073: The Frame, Part II – Shadows &amp; CSS</h1>

<h2 id="frame-off">Frame Off</h2>

<!-- 0, 1 -->
<!-- first occurrence of application and terminal screen shots on a single page -->
<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img0" src="../images/screenshots/014_container/container_08.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal0" class="modal">																	<!-- modal# -->
				<span class="close0">&times;</span>															<!-- close# -->
				<img class="modal-content" id="img00" />															<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal0");														// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img0");															// img#
			var modalImg = document.getElementById("img00");													// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close0")[0];											// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img1" src="../images/screenshots/014_container/container_08_term.png" alt="Current example terminal output" />		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal1" class="modal">																				<!-- modal# -->
				<span class="close1">&times;</span>																		<!-- close# -->
				<img class="modal-content" id="img11" />																		<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal1");																	// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img1");																		// img#
			var modalImg = document.getElementById("img11");																// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close1")[0];														// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																								<!-- ------------- filename (below) --------- -->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/014_container/container_08_frame_off.d" target="_blank">here</a>.
	</div>
</div>
<!-- end of snippet for first (1st) occurrence of application and terminal screen shots on a single page -->

<p>Today, we start with the irony of looking at the invisible <code class="language-plaintext highlighter-rouge">Frame</code>. Turning off visibility is one way of dealing with the aesthetic problem we talked about last time and this is done with a call to <code class="language-plaintext highlighter-rouge">setShadowType(</code>) as seen in the <code class="language-plaintext highlighter-rouge">FrameOff</code> class:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">FrameOff</span> <span class="p">:</span> <span class="n">Frame</span>
<span class="p">{</span>
	<span class="k">private</span><span class="p">:</span>
	<span class="nb">string</span> <span class="n">titleLabel</span> <span class="p">=</span> <span class="s">"Coordinates"</span><span class="p">;</span>
	<span class="n">FrameChildGrid</span> <span class="n">frameChildGrid</span><span class="p">;</span>
	
	<span class="k">public</span><span class="p">:</span>
	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="k">super</span><span class="p">(</span><span class="n">titleLabel</span><span class="p">);</span>
		<span class="n">setShadowType</span><span class="p">(</span><span class="n">ShadowType</span><span class="p">.</span><span class="n">NONE</span><span class="p">);</span>
		<span class="n">frameChildGrid</span> <span class="p">=</span> <span class="k">new</span> <span class="n">FrameChildGrid</span><span class="p">();</span>
		<span class="n">add</span><span class="p">(</span><span class="n">frameChildGrid</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// this()</span>
	
<span class="p">}</span> <span class="c1">// class FrameOff</span>
</code></pre></div></div>

<p>This class is identical to the <code class="language-plaintext highlighter-rouge">FrameOn</code> class we looked at last time, with the exception of this one statement. <code class="language-plaintext highlighter-rouge">ShadowType.NONE</code> gives the results seen in the above screen shot.</p>

<h3 id="frame-styling">Frame Styling</h3>

<p>Turning visibility on or off is considered styling, and so is giving the Frame a 3D look. But whereas we use <code class="language-plaintext highlighter-rouge">setShadowType()</code> to set visibility, all other styling is done with <em>CSS</em>.</p>

<h2 id="styling-frames-with-css">Styling Frames with CSS</h2>

<!-- 2, 3 -->
<!-- second occurrence of application and terminal screen shots on a single page -->
<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img2" src="../images/screenshots/014_container/container_09.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal2" class="modal">																<!-- modal# -->
				<span class="close2">&times;</span>														<!-- close# -->
				<img class="modal-content" id="img22" />														<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal2");													// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img2");														// img#
			var modalImg = document.getElementById("img22");												// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close2")[0];										// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img3" src="../images/screenshots/014_container/container_09_term.png" alt="Current example terminal output" /> 		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal3" class="modal">																			<!-- modal# -->
				<span class="close3">&times;</span>																	<!-- close# -->
				<img class="modal-content" id="img33" />																	<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal3");																// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img3");																	// img#
			var modalImg = document.getElementById("img33");															// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close3")[0];													// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																							<!--------- filename (below) ------------>
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/014_container/container_09_frame_css.d" target="_blank">here</a>.
	</div>
</div>
<!-- end of snippet for second (2nd) occurrence of application and terminal screen shots on a single page -->

<p>To use <em>CSS</em> in <em>GTK</em>, we need to do three things:</p>

<ul>
  <li>write a <code class="language-plaintext highlighter-rouge">CSS</code> file (which can be an actual file or handled as a string within your code),</li>
  <li>associate it with our application’s <code class="language-plaintext highlighter-rouge">GDK Screen</code>, and</li>
  <li>tell our application to use this association.</li>
</ul>

<p>But before we dive in, let’s start with a point of basic terminology…</p>

<h3 id="step-one-writing-a-css-file">Step One: Writing a CSS File</h3>

<p>In <em>CSS</em> (<em>Cascading Style Sheet</em>) terms, the bits of code used to set properties for various elements are called selectors. For <em>GTK</em>’s purposes, selectors can be written in files ending in the <code class="language-plaintext highlighter-rouge">.css</code> extension similar to this:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">border</span>
<span class="p">{</span>
	<span class="n">border</span><span class="p">-</span><span class="n">style</span><span class="p">:</span> <span class="n">outset</span><span class="p">;</span>
<span class="cm">/*	border-style: inset; */</span>
<span class="cm">/*	border-style: solid; */</span>
<span class="cm">/*	border-style: none; */</span>
<span class="p">}</span>
</code></pre></div></div>

<p>In this example, I’ve laid out the four possible styles of the <code class="language-plaintext highlighter-rouge">Frame</code> border while commenting out three of them. Here’s what these options mean:</p>

<ul>
  <li><code class="language-plaintext highlighter-rouge">outset</code>: give the <code class="language-plaintext highlighter-rouge">Frame</code> a 3D styling and make it look raised from the ‘page,’</li>
  <li><code class="language-plaintext highlighter-rouge">inset</code>: another 3D styling, this time seemingly recessed into the ‘page,’</li>
  <li><code class="language-plaintext highlighter-rouge">solid</code>: a plain, solid line, and</li>
  <li><code class="language-plaintext highlighter-rouge">none</code>: which has the same effect as <code class="language-plaintext highlighter-rouge">setShadowType(ShadowType.NONE)</code>.</li>
</ul>

<p>If we save this file in a local <code class="language-plaintext highlighter-rouge">css</code> directory with the name <code class="language-plaintext highlighter-rouge">frame.css</code>, step one is done. Now let’s look at…</p>

<h3 id="step-two-the-association-between-a-css-file-and-our-application">Step Two: The Association Between a CSS File and Our Application</h3>

<p>This is a two-step process, with a total of five sub-steps, in which we:</p>

<ul>
  <li>have the widget provide its <code class="language-plaintext highlighter-rouge">StyleContext</code> to the CSS object,</li>
  <li>instantiate a <code class="language-plaintext highlighter-rouge">CssProvider</code> object which serves as a wrapper of sorts for our <em>CSS</em> file (<code class="language-plaintext highlighter-rouge">css/frame.css</code>),</li>
  <li>pull in that <code class="language-plaintext highlighter-rouge">.css</code> file, and</li>
  <li>set up the association between the <em>CSS</em> file and the <code class="language-plaintext highlighter-rouge">StyleContext</code>.</li>
</ul>

<p>That code, encapsulated in a nice, neat package looks like this:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">CSS</span> <span class="c1">// GTK4 compliant</span>
<span class="p">{</span>
	<span class="n">CssProvider</span> <span class="n">provider</span><span class="p">;</span>
	<span class="nb">string</span> <span class="n">cssPath</span> <span class="p">=</span> <span class="s">"./css/frame.css"</span><span class="p">;</span>

	<span class="k">this</span><span class="p">(</span><span class="n">StyleContext</span> <span class="n">styleContext</span><span class="p">)</span>
	<span class="p">{</span>
		<span class="n">provider</span> <span class="p">=</span> <span class="k">new</span> <span class="n">CssProvider</span><span class="p">();</span>
		<span class="n">provider</span><span class="p">.</span><span class="n">loadFromPath</span><span class="p">(</span><span class="n">cssPath</span><span class="p">);</span>
		<span class="n">styleContext</span><span class="p">.</span><span class="n">addProvider</span><span class="p">(</span><span class="n">provider</span><span class="p">,</span> <span class="n">GTK_STYLE_PROVIDER_PRIORITY_APPLICATION</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// this()	</span>
	
<span class="p">}</span> <span class="c1">// class CSS</span>
</code></pre></div></div>

<h3 id="step-three-telling-our-widget-to-use-css">Step Three: Telling Our Widget to Use CSS</h3>

<p>This is the simplest step because it’s one statement. However, it has to be done for every <code class="language-plaintext highlighter-rouge">Widget</code> that needs <em>CSS</em> decoration.</p>

<p>First, in the class attributes, we declare the <em>CSS</em> object:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">CSS</span> <span class="n">css</span> <span class="p">=</span> <span class="k">new</span> <span class="n">CSS</span><span class="p">();</span>
</code></pre></div></div>

<p>Then in the class constructor, we add this line:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">css</span> <span class="p">=</span> <span class="k">new</span> <span class="n">CSS</span><span class="p">(</span><span class="n">getStyleContext</span><span class="p">());</span>
</code></pre></div></div>

<p>Which means our entire <code class="language-plaintext highlighter-rouge">FrameOn</code> class will look like this:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">FrameOn</span> <span class="p">:</span> <span class="n">Frame</span>
<span class="p">{</span>
	<span class="k">private</span><span class="p">:</span>
	<span class="n">CSS</span> <span class="n">css</span><span class="p">;</span>
	<span class="nb">string</span> <span class="n">titleLabel</span> <span class="p">=</span> <span class="s">"Coordinates"</span><span class="p">;</span>
	<span class="n">FrameChildGrid</span> <span class="n">frameChildGrid</span><span class="p">;</span>
	<span class="kt">float</span> <span class="n">xAlign</span> <span class="p">=</span> <span class="mf">0.05</span><span class="p">,</span> <span class="n">yAlign</span> <span class="p">=</span> <span class="mf">0.5</span><span class="p">;</span>

	<span class="k">public</span><span class="p">:</span>
	<span class="k">this</span><span class="p">()</span>
	<span class="p">{</span>
		<span class="k">super</span><span class="p">(</span><span class="n">titleLabel</span><span class="p">);</span>
		<span class="n">css</span> <span class="p">=</span> <span class="k">new</span> <span class="n">CSS</span><span class="p">(</span><span class="n">getStyleContext</span><span class="p">());</span>

		<span class="n">setLabelAlign</span><span class="p">(</span><span class="n">xAlign</span><span class="p">,</span> <span class="n">yAlign</span><span class="p">);</span>
		<span class="n">frameChildGrid</span> <span class="p">=</span> <span class="k">new</span> <span class="n">FrameChildGrid</span><span class="p">();</span>
		<span class="n">add</span><span class="p">(</span><span class="n">frameChildGrid</span><span class="p">);</span>
		
	<span class="p">}</span> <span class="c1">// this()</span>
	
<span class="p">}</span> <span class="c1">// class FrameOn</span>
</code></pre></div></div>

<h2 id="css-property-names">CSS Property Names</h2>

<p><em>Disclaimer: The following demo is downright ugly and is meant solely to demonstrate coding technique, not design sensibilities.</em></p>

<!-- 4, 5 -->
<!-- third occurrence of application and terminal screen shots on a single page -->
<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img4" src="../images/screenshots/015_fontdeco/fontdeco_03.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal4" class="modal">																<!-- modal# -->
				<span class="close4">&times;</span>														<!-- close# -->
				<img class="modal-content" id="img44" />														<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal4");													// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img4");														// img#
			var modalImg = document.getElementById("img44");												// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close4")[0];										// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img5" src="../images/screenshots/015_fontdeco/fontdeco_03_term.png" alt="Current example terminal output" /> 		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal5" class="modal">																			<!-- modal# -->
				<span class="close5">&times;</span>																	<!-- close# -->
				<img class="modal-content" id="img55" />																	<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal5");																// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img5");																	// img#
			var modalImg = document.getElementById("img55");															// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close5")[0];													// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																							<!---------- filename (below) ---------->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/015_fontdeco/fontdeco_03_css_buttons_labels_gtk4_style.d" target="_blank">here</a>.
	</div>
</div>
<!-- end of snippet for third (3rd) occurrence of application and terminal screen shots on a single page -->

<p>The reason why <em>CSS</em> names work is because <em>GTK</em> has a convention for naming widgets and their properties. Some names are set up by <code class="language-plaintext highlighter-rouge">GTK</code>, but you can also roll up your sleeves and add some yourself.</p>

<p>For the sake of demonstration, let’s assume you wanna gain control over a <code class="language-plaintext highlighter-rouge">Label</code>’s background color. In class form, it might look like this:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">class</span> <span class="n">CSSLabel</span> <span class="p">:</span> <span class="n">Label</span>
<span class="p">{</span>
	<span class="n">CSS</span> <span class="n">css</span><span class="p">;</span>
		
	<span class="k">this</span><span class="p">(</span><span class="nb">string</span> <span class="n">textLabel</span><span class="p">,</span> <span class="nb">string</span> <span class="n">cssName</span><span class="p">)</span>
	<span class="p">{</span>
		<span class="k">super</span><span class="p">(</span><span class="n">textLabel</span><span class="p">);</span>
		
		<span class="c1">// css stuff</span>
		<span class="n">setName</span><span class="p">(</span><span class="n">cssName</span><span class="p">);</span>
		<span class="n">css</span> <span class="p">=</span> <span class="k">new</span> <span class="n">CSS</span><span class="p">(</span><span class="n">getStyleContext</span><span class="p">());</span>

	<span class="p">}</span> <span class="c1">// this()</span>
	
<span class="p">}</span> <span class="c1">// class CSSLabel</span>
</code></pre></div></div>

<p>Now our <code class="language-plaintext highlighter-rouge">.css</code> file can refer to our Label like this:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">label</span><span class="err">#</span><span class="n">label1</span>
<span class="p">{</span>
	<span class="n">font</span><span class="p">-</span><span class="n">family</span><span class="p">:</span> <span class="n">Arial</span><span class="p">,</span> <span class="n">Helvetica</span><span class="p">,</span> <span class="n">sans</span><span class="p">-</span><span class="n">serif</span><span class="p">;</span>
	<span class="n">color</span><span class="p">:</span> <span class="n">red</span><span class="p">;</span>
	<span class="n">font</span><span class="p">-</span><span class="n">size</span><span class="p">:</span> <span class="mi">26</span><span class="n">px</span><span class="p">;</span>
	<span class="n">background</span><span class="p">-</span><span class="n">color</span><span class="p">:</span> <span class="n">yellow</span><span class="p">;</span>
	
<span class="p">}</span> <span class="cm">/* label1 */</span>
</code></pre></div></div>

<p>The selector name, <code class="language-plaintext highlighter-rouge">label#label1</code>, tells <em>GTK</em> that only widgets derived from an entity with a CSS name of <code class="language-plaintext highlighter-rouge">label</code>—and further, these descendants must be named <code class="language-plaintext highlighter-rouge">label1</code>—only those widgets will get this styling. Leaving out this drill-down aspect, we could also write the selector name like this:</p>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nf">#label1</span>
</code></pre></div></div>

<p>Drop the <em>CSS</em> class into your application and you’re off to the races.</p>

<h2 id="css-and-the-gtk-inspector">CSS and the GTK Inspector</h2>

<p>With your application up and running, you can use the <em>GTK Inspector</em> by hitting <code class="language-plaintext highlighter-rouge">Ctrl-Shift-D</code> (how apropos) to look at <em>CSS</em> names, both the ones you yourself have assigned and the ones assigned by default. Not all <em>CSS</em> names show up in the Inspector, but <a href="https://developer.gnome.org/gtk3/stable/chap-css-properties.html">here’s a handy reference</a>.</p>

<p>And if I haven’t covered enough detail in this writing, you can find <a href="https://developer.gnome.org/gtk3/stable/chap-css-overview.html">more on CSS and GTK here</a>.</p>

<h2 id="conclusion">Conclusion</h2>

<p>And that’s the basics of both <em>Frame</em>s and <em>CSS</em>. It should be remembered, however, that it’s easy to get carried away and over-style an application. Sometime down the road, we may come back to this subject, but it’s an issue of design rather than coding, so it’s a low priority for now.</p>

<p>Until next time.</p>

<div class="blog-nav">
	<div style="float: left;">
		<a href="./0072-frame-part-i.html">Previous: Frames, Part I</a>
	</div>
	<div style="float: right;">
		<a href="./0074-nodes-i-doodle-a-noodle.html">Next: Doodle a Noodle</a>
	</div>
</div>
<p>
	<h3></h3>
<div class="inpage-frame">
	<a href="https://github.com/sponsors/rontarrant">
		<BR>
		<BR>
		<B>Is this article useful? Educational? Entertaining, perhaps?</B>
		<BR>
		<figure class="left">
			<img src="../images/favorite_32.png" alt="Sponsorship heart" style="width: 32px; height: 32px;">
		</figure>
		You're free to accept or decline this invitation to become our newest sponsor.
	</a>
</div>
	<h4 class="comment-blurb"><B>Comments? Questions? Observations?</B></h4>
	<p>
		Did we miss a tidbit of information that would make this post even more informative? Let's talk about it in the comments.
	</p>
	<script src="https://utteranc.es/client.js"
		repo="rontarrant"
		issue-term="pathname"
		theme="github-light"
		crossorigin="anonymous"
		async>
	</script>
	<ul>
		<li> come on over to the <a href="https://forum.dlang.org/">D Language Forum</a> and look for one of the <i>gtkDcoding</i> announcement posts, </li>
		<li> drop by <a href="https://forum.gtkd.org/">the <i>GtkD Forum</i></a>,</li>
		<li> follow the link below to email me, or</li>
		<li> go to the	<a href="https://www.facebook.com">gtkDcoding Facebook page.</a></li>
	</ul>
</p>
<p> You can also subscribe <a href="/feed.xml">via RSS</a> so you won't miss anything. Thank you very much for dropping by.</p>
<p>&copy; Copyright 2025 Ron Tarrant </p>
</div>

	<a class="u-url" href="./0073-frame-part-ii.html" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">gtkDcoding</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Ron Tarrant</li><li><a class="u-email" href="mailto:gtkDcoding@gmail.com">gtkDcoding@gmail.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/rontarrant"><svg class="svg-icon"><use xlink:href="../assets/minima-social-icons.svg#github"></use></svg> <span class="username">rontarrant</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Simple examples of how to use GtkD to build GUI applications.</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
